<template>
  <div class="playMusic">
    <!-- 背景虚拟图 -->
    <div class="bg" :style="{ backgroundImage: `url(${playDetail.al.picUrl})` }"></div>
    <!-- 头部区域 -->
    <div class="playTop">
      <!-- 左侧箭头 -->
      <!-- 通过 emit 子传父， 告诉父组件关闭界面 -->
      <div class="back" @click="$emit('back')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
      </div>
      <!-- 中间文字 -->
      <div class="center" style="text-align: center">
        <div class="title">
          <!-- <van-notice-bar speed="40" scrollable :text="playDetail.al.name" color="#fff" background="rgba(0,0,0,0)" style="width: 5rem;padding-bottom: 0.3rem;"/> -->
          {{ playDetail.al.name }}
        </div>
        <!-- <div class="author">{{ playDetail.ar[0].name }}</div> -->
      </div>
      <!-- 右侧分享 -->
      <div class="share">
        <svg class="icon" aria-hidden="true" style="width: 0.45rem; height: 0.45rem">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
    </div>
    <!-- 旋转唱片 -->
    <div class="playContent" v-show="!isLyric" @click="showLyric()">
      <img class="needle" :class="{ active: !$store.state.toggle }" src="@/assets/needle-ab.png" alt="" />
      <img class="disc" src="@/assets/disc-ip6.png" alt="" />
      <!-- <img class="playImg" :class="{ active: !$store.state.toggle}" :src="playDetail.al.picUrl" alt="" /> -->
      <div class="img-container" :style="{ transform: imgTrans }">
        <img class="playImg" ref="img" :class="{ musicImgRotate: !$store.state.toggle }" :src="playDetail.al.picUrl" />
      </div>
      <!-- <div class="" :style="{ transform: imgTrans }" style="">
        <img ref="img" class="playImg" :class="{ musicImgRotate: !$store.state.toggle }" :src="playDetail.al.picUrl"  />
      </div> -->
    </div>
    <!-- 轮播歌词 -->
    <div></div>
    <div class="playLyric" v-show="isLyric" @click="showLyric()" ref="lyricRef">
      <p :class="{ activep: $store.state.currentTime * 1000 > item.pre && $store.state.currentTime * 1000 < item.time }" v-for="(item, index) in $store.getters.lyricList" :key="index">
        {{ item.lyric }}
      </p>
    </div>
    <!-- 歌曲进度条 -->
    <div class="progress"></div>
    <!-- 底部播放功能控件 -->
    <div class="playFooter">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xunhuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true" style="margin-left: 0.3rem" @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishoushangyige"></use>
      </svg>
      <!-- 播放 -->
      <svg v-show="$store.state.toggle" @click="playMusic" class="icon" aria-hidden="true" style="width: 0.85rem; height: 0.85rem">
        <use xlink:href="#icon-bofang2"></use>
      </svg>
      <!-- 暂停 -->
      <svg v-show="$store.state.toggle === false" @click="playMusic" class="icon" aria-hidden="true" style="width: 0.85rem; height: 0.85rem">
        <use xlink:href="#icon-yinlezanting"></use>
      </svg>
      <svg class="icon" aria-hidden="true" style="margin-right: 0.3rem" @click="goPlay(1)">
        <use xlink:href="#icon-xiayigexiayishou"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yinle-liebiao"></use>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onBeforeMount, onMounted, onUpdated, ref, watch } from 'vue'
import { mapState, useStore } from 'vuex'

const props = defineProps({
  playDetail: {
    type: Object,
    default: {}
  },
  // 直接接收一个函数
  play: {
    type: Function,
    default: () => {}
  }
})

const store = useStore()
const lyricRef = ref(null)

//TODO 实现歌词展示 ↓↓↓
// 控制歌词的显示和隐藏
const isLyric = ref(false)
const showLyric = () => {
  isLyric.value = !isLyric.value
}

//TODO 播放旋转功能 ↓↓↓
const img = ref()
const imgTrans = ref('')
const isPlaying = computed(() => store.state.toggle)
let oldValue = ref('')
let newValue = ref('')
function playMusic() {
  if (!isPlaying.value) {
    // console.log(321)
    nextTick(() => {
      newValue.value = getComputedStyle(img.value, null).getPropertyValue('transform')
      imgTrans.value = newValue.value + ' ' + oldValue.value
      oldValue.value = newValue.value
    })
  }
  props.play()
}

//TODO 监听播放时间，实现歌词居中滚动 ↓↓↓
const currentTime = computed(() => store.state.currentTime)
watch(currentTime, (newVal, oldValue) => {
  // console.log(newVal)
  // console.log([lyricRef])
  nextTick(() => {
    let p = document.querySelector('p.activep')
    lyricRef.value.scrollTop = p.offsetTop-200
  })
})


//TODO 歌曲界面切换上下首 ↓↓↓
const goPlay = (num) => {
  console.log(store.state.playlist)
  console.log(store.state.playCurrentIndex)
  let index = store.state.playCurrentIndex + num
  if ( index < 0 ) {
    // 从歌单末尾播放
    index = store.state.playlist.length - 1
  } else if( index === store.state.playlist.length) {
    // 从歌单第一首开始播放
    index = 0
  }
  store.commit('playCurrentIndex', index)
}


onMounted(() => {
  isLyric.value = false
  nextTick(() => {})
})

onBeforeMount(() => {
})

// console.log(props.playDetail)
</script>


<style lang="less" scoped>
.playMusic {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  text-align: center;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-size: auto 100%;
    background-position: center;
    filter: blur(60px);
  }
  .playTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 7.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    padding: 0 0.4rem;
    .icon {
      fill: #fff;
      width: 0.6rem;
      height: 0.6rem;
    }
    .author {
      font-size: 0.2rem;
      color: rgb(255, 0, 0);
    }
  }
  .playContent {
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    left: 0;
    top: 1.5rem;
    .needle {
      width: 2rem;
      height: auto;
      position: absolute;
      left: 3.5rem;
      transform-origin: 0.3rem 0;
      transition: all 0.7s;
      transform: rotate(-20deg);
      z-index: 10;
    }
    .active {
      transition: all 0.7s;
      transform: rotate(3deg);
      z-index: 10;
    }
    .disc {
      width: 5.5rem;
      height: auto;
      position: absolute;
      left: calc(50% - 2.73rem);
      top: 2rem;
    }
    .img-container {
      width: 3.5rem;
      height: 3.5rem;
      position: absolute;
      left: calc(50% - 1.7rem);
      top: 3rem;
      .playImg {
        width: 100%;
        height: 100%;
        border-radius: 1.75rem;
      }
    }
  }
  .playFooter {
    width: 7.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8rem;
    .icon {
      fill: #fff;
      width: 0.5rem;
      height: 0.5rem;
    }
  }
  .playLyric {
    position: absolute;
    width: 7rem;
    height: 9rem;
    left: 0.3rem;
    top: calc(50% - 5rem);
    overflow: scroll;
    text-align: center;
    color: rgb(255, 255, 255);
    .activep {
      transition: all .3s;
      color: red;
      font-size: 0.36rem;
    }
    p {
      padding: 0.15rem 0;
    }
  }
}

.musicImgRotate {
  animation: rotate1 20s linear infinite;
}
@keyframes rotate1 {
  /* 这里从来没接触过 直接抄的。。。 */
  0% {
    transform: rotate(0deg);
    /*从0度开始*/
  }
  100% {
    transform: rotate(1turn);
    /*360度结束*/
  }
}

.pause {
  animation-play-state: paused;
}
</style>